<script setup>
import {reactive, ref} from "vue";
import {Lock,Cellphone} from "@element-plus/icons-vue";
import axios from "axios";
import router from "@/router/index.js";
import {useAuthStore} from "@/stores/authStore.js";
import { checkLogin } from "@/util/api";
	// 表单引用对象
	const formDataRef = ref()

	// 表单数据
	const formData = reactive({
		phoneNumber:'',
		userPassword:''
	})

	// 自定义手机号码校验规则
	const validateCellphone = (rule, value, callback) => {
		// 创建用于手机号码校验正则表达式
		const regx = /^1[0-9]{10}$/
		// 使用正则表达式进行校验
		if (regx.test(value)) {
			// 校验通过
			callback()
		} else {
			// 校验不通过
			callback(new Error("请输入正确的手机号码"))
		}
	}

	// 自定义密码校验规则
	const validatePassword = (rule, value, callback) => {
		// 创建用于手机号码校验正则表达式
		const regx = /^[A-Za-z0-9]{6,20}$/
		// 使用正则表达式进行校验
		if (regx.test(value)) {
			// 校验通过
			callback()
		} else {
			// 校验不通过
			callback(new Error("登录密码可由6~20个大写字母、小写字母或数字组成"))
		}
	}

	// 表单校验
	const formDataRules = reactive({
		phoneNumber:[
			{ required: true, message: '请填写手机号码', trigger: 'blur' },
			{validator: validateCellphone, trigger: "blur"}
		],
		userPassword:[
			{ required: true, message: '请填写登录密码', trigger: 'blur' },
			{validator: validatePassword, trigger: "blur"}
		]
	})

	// 登录
	const loginUser = () => {
		// 需要对用户的表单数据进行再次校验
		
		formDataRef.value.validate((valid) => {
			// 判断是否校验通过
			if (valid) {
				checkLogin(formData).then((res) => {
					// 成功后的回调函数
					console.log(res)
					const authStore = useAuthStore();
					authStore.setToken(res.data.phoneNumber);
					authStore.setLoginUser(res.data.userId)
					if(res.success === true){
						router.push('/');
					}
					
				})
			}
		})
	}

	const register = () =>{
		router.push("/register");
	}
</script>

<template>
	<div id="app">
		<div class="login-container">
			<div class="login-title">
				<div>
					<span>个人通讯录管理系统</span>
				</div>
				<div>
					<span>【 用户登录 】</span>
				</div>
			</div>
			<div class="login-form">
				<el-form ref="formDataRef" :model="formData" :rules="formDataRules">
					<el-form-item prop="cellphone">
						<el-input type="text"
						          v-model="formData.phoneNumber"
						          size="large"
						          :prefix-icon="Cellphone"
						          placeholder="请输入手机号码"/>
					</el-form-item>
					<el-form-item prop="password">
						<el-input type="password"
						          v-model="formData.userPassword"
						          size="large"
						          :prefix-icon="Lock"
						          placeholder="请输入密码"/>
					</el-form-item>
					<el-form-item>
						<el-button
								type="primary"
								size="large"
								icon="SwitchButton"
								style="width: 100%"
								@click="loginUser">
							登录
						</el-button>
						<el-link type="success" @click="register">还没有账号？去注册</el-link>
					</el-form-item>
				</el-form>
			</div>
			<div class="login-footer"></div>
		</div>
	</div>
</template>

<style scoped>
	.login-container {
		box-sizing: border-box;
		width: 660px;
		height: 520px;
		padding: 30px;
		border: 2px solid deepskyblue;
		border-radius: 20px;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.login-title {
		box-sizing: border-box;
		width: 100%;
		height: 120px;
		background: deepskyblue;
		color: white;
	}
	.login-title div:nth-child(1) {
		width: 100%;
		height: 80px;
		font: normal bold 30px 微软雅黑;
		text-align: center;
		line-height: 80px;
	}
	.login-title div:nth-child(2) {
		width: 100%;
		height: 40px;
		font: normal bold 18px 微软雅黑;
		text-align: center;
	}
	.login-form {
		margin-top: 20px;
	}

	.login-footer {
		box-sizing: border-box;
		width: 100%;
		height: 120px;
		background: deepskyblue;
	}
</style>